<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hi</title>
    <link rel="stylesheet" href="bootstrap3.3.7/css/bootstrap.min.css">
    <script src="bootstrap3.3.7/js/jquery-3.2.1.min.js"></script>
    <script src="bootstrap3.3.7/js/bootstrap.js"></script>
</head>

<style>
    .container{
        max-width: 600px;
        margin: 0 auto;
    }
    img{
        width: 500px;
        height: auto;
    }
</style>
<body>

<div class="container">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#home" data-toggle="tab">
                Girl1
            </a>
        </li>
        <li><a href="#ios" data-toggle="tab">Girl2</a></li>
        <li class="dropdown">
            <a href="#" id="myTabDrop1" class="dropdown-toggle"
               data-toggle="dropdown">Girl3
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
                <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
            </ul>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="home" >
            <img src="pic/1.jpg" class="img-responsive img-thumbnail">
        </div>
        <div class="tab-pane fade" id="ios">
            <img src="pic/2.jpg" class="img-responsive">
        </div>
        <div class="tab-pane fade" id="jmeter">
            <img src="pic/3.jpg" class="img-responsive">
        </div>
        <div class="tab-pane fade" id="ejb">
            <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
            </p>
        </div>
    </div>
</div>
</body>
</html>